<template>
	<view class="content">
		<view class="banners">
			<!-- <image class="banner" :src="detailInfo.banners" mode="widthFix"></image> -->
			<swiper class="swiper-box"
			 :autoplay='false' 
			style="height:600rpx"
			interval='5000' :indicator-dots='true'
			indicator-active-color='#02B1AA'
			>
				<swiper-item v-for="(item,i) in banners" :key="i" >
					<view class="swiper-item" :class="'swiper-item' + i">
						<image class="banner" :src="item" mode="scaleToFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<uni-icons type="left" @click="goBack" class="back" color="#333" size="30"></uni-icons>
		</view>
	  <view class="plan-contianer">
		  <view class="plan-info">
			<view class="mainTitle">{{detailInfo.menuName}}</view>
			<view class="soli-item">
				<text class="name">适用车型</text>
				<text class="value">{{detailInfo.cartType}}</text>
			</view>
			<view class="soli-item">
				<text class="name">服务时长</text>
				<text class="value">{{detailInfo.serviceTimes}}分钟</text>
			</view>
			<view class="soli-item">
				<text class="name">服务描述</text>
				<text class="value">{{detailInfo.describe}}</text>
			</view>
		</view>
		<view class="plan-detail">
			<view class="mainTitle">服务详情</view>
			<!-- <view style="width:686rpx;margin:0 auto" v-html="detailInfo.content"></view> -->
			<uv-parse :content="detailInfo.content"></uv-parse>
			<!-- <image src="../../static/test/baner.png" mode=""></image> -->
		</view>
		<view style="height:120rpx"></view>
	  </view>
	  
	  <footer-button btnTip='立即预约' @clickFooter='goWashCar'></footer-button>
	</view>
</template>

<script>
    import {menuInfo} from "@/untils/api"
	export default {
		data() {
			return {
				detailInfo:null,
				banners:[],
			};
		},
		// onLoad(option){
  //          this.getDetailInfo(option.id)
		// },
		mounted(){
			this.$removeStorageSync('seriveParams')
			this.$removeStorageSync('selectPlanInfo')
			this.$removeStorageSync('selectCartInfo')
			this.getDetailInfo(this.$mp.query.id)
		},
		methods: {
			goWashCar(){
				let nearStore = this.$getStorageSync('nearStore')
				if(!nearStore){
					uni.showToast({
						icon:'none',
						title: '您附近3km内暂无店铺,无法预约',
					})
					return false;
				}
				this.$setStorageSync('selectPlanInfo', this.detailInfo)
				uni.navigateTo({
					url:'/subpackage/orderWashCar/index?menuId=' + this.$mp.query.id
				})
			},
			goBack(){
			  uni.navigateBack({
				  delta:1,
			  })	
			},
			getDetailInfo(id){
				menuInfo({washMenuId:id}).then((res) => {
					this.detailInfo = res.data
					this.banners = res.data.banners.split(',')
					console.log(this.banners)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	background: #f8f8f8;
	position: relative;
	height: 100%;
	overflow: scroll;
	.banners{
		position: relative;
		.back{
			position: fixed;
			z-index: 99;
			top: 60rpx;
			left: 20rpx;
		}
	}
	.banner{
		width: 750rpx;
		height: 600rpx;
		
	}
	.plan-contianer{
		// height: calc(100% - 580rpx);
		// overflow: scroll;
		margin-top: -20rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		background: #fff;
		position: relative;
		z-index: 9;
	}
	.plan-info{
		// margin-top: -20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
		.mainTitle{
			margin-top: 40rpx;
		}
		.soli-item{
			width: 686rpx;
			margin: 0 auto;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 30rpx;
			.name{
				width: 200rpx;
			}
			.value{
				width: calc(100% - 200rpx);
			}
		}
	}
	.plan-detail{
		background-color: #fff;
		padding-top: 20rpx;
	}
}
</style>
